<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>手机验证码</title>

    <script type="text/javascript" th:src="@{/js/jquery.js}" src="../static/js/jquery.js"></script>


</head>
<body>
<style type="text/css">
    .msgs{display:inline-block;width:104px;color:#fff;font-size:12px;border:1px solid #0697DA;text-align:center;height:30px;line-height:30px;background:#0697DA;cursor:pointer;}
    form .msgs1{background:#E6E6E6;color:#818080;border:1px solid #CCCCCC;}
</style>

<div>
    手机号:<input type="text" id="phoneNumber" name="phoneNumber" style="height: 25px"/>
    <span id="getcode" class="msgs">获取短信验证码</span>
    <span id="span">Cyw</span>
    <span style="visibility: visible"></span>
</div><br/><br/>
<div>
请输入验证码:<input type="text" name="code" id="code">
<button id="btn" style="background-color: aqua">确认</button>
<span id="span1">Cyw1</span>
</div>
<script type="text/javascript">
    $(function  () {
        //获取短信验证码
        var validCode=true;
        $(".msgs").click (function  () {
            var phoneNumber = $("#phoneNumber").val();
            var span = $("#span");

            if (phoneNumber == ""){
                var msg = "请输入手机号"
                span.css("color","red");
                span.html(msg);
                return false;
            }
            if (phoneNumber.length != 11){
                var msg = "手机号11位"
                span.css("color","red");
                span.html(msg);
                return false;
            }
            var msg = "正在发送,请稍后"
            span.css("color","blue");
            span.html(msg);

            $.post("/redis/sendCode",{phoneNumber:phoneNumber},function (data) {
                var span = $("#span");
                if(data.toString()==phoneNumber){
                    var msg = "发送成功"
                    span.css("color","green");
                    span.html(msg);
                }
                if (data.toString()=="overThree"){
                    var msg = "每天只能验证3次"
                    span.css("color","red");
                    span.html(msg);
                    return false;
                }
            });

            var time=120;
            var code=$(this);
            if (validCode) {
                validCode=false;
                code.addClass("msgs1");
                var t=setInterval(function  () {
                    time--;
                    code.html(time+"秒");
                    if (time==0) {
                        clearInterval(t);
                        code.html("重新获取");
                        validCode=true;
                        code.removeClass("msgs1");

                    }
                },1000)
            }
        })

        $("#btn").click(function () {
            var code = $("#code").val();
            var phoneNumber = $("#phoneNumber").val();
            var span1 = $("#span1");
            if (code == ""){
                var msg = "请输入验证码"
                span1.css("color","red");
                span1.html(msg);
                return false;
            }

            $.post("/redis/checkCode",{code:code,phoneNumber:phoneNumber},function (data) {

                if(data.toString()=="checkOK"){
                    var msg = "验证成功"
                    span1.css("color","green");
                    span1.html(msg);
                }
                if (data.toString()=="checkFail"){
                    var msg = "验证码输入错误"
                    span1.css("color","red");
                    span1.html(msg);
                }
            });


        });
    })
</script>

</body>
</html>